<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户列表展现</title>
		
	</head>
	<body>
		<div id="app">
		<div align="center">ID:<input type="text" disabled v-model="user.id">
			姓名:<input type="text" v-model="user.name"/>
			年龄:<input type="text" v-model="user.age"/>
			性别:<input type="text" v-model="user.sex"/>
			<button @click="updateUser">更新</button></div>
				<hr />
			<table id= "tab1" border="1px" width="700px" align="center">
				<tr ><td colspan = "5" align="center">
				<h1 >表格数据</h1></td>
				</tr>
				<tr align="center">
					<td>ID</td>
					<td>姓名</td>
					<td>年龄</td>
					<td>性别</td>
					<td>操作</td>
				</tr>
				<tr align="center" v-for="item in userList">
					<td v-text="item.id"></td>
					<td v-text="item.name"></td>
					<td v-text="item.age"></td>
					<td v-text="item.sex"></td>
					<td>
						<!-- 如果没有数据来源，则需要手动传递 -->
						<button @click="updateUserBtn(item)">修改</button>
						<button @click="deleteUser(item.id)">删除</button>
						
					</td>
				</tr>
				
			</table>
		</div>
		<!-- 导入vue，axios -->
		<script src="../js/vue.js"></script>
		<script src="../js/axios.js"></script>
		<script>
			/**
			 * 刷新页面后，自动发起ajax请求,mounted(){}
			 * 
			 */
			axios.defaults.baseURL="http://localhost:8090"
			const app = new Vue({
				el:"#app",
				data:{
					userList: [],
					user:{
						id:"",
						name:"",
						age:"",
						sex:""
					}
				},
				methods:{
					getUserList(){
						axios.get("/getUser").then(result => {
							this.userList = result.data
							// console.log(result.data)
						})
					},
					deleteUser(id){
						axios.delete("/user/"+id).then(result =>{
							alert(result.data)
							this.getUserList()
						// 删除过后实时刷新(this.getUserList())
						})
					},
					updateUserBtn(user){
						this.user=user
						// this.user.id = user.id
						// this.user.name = user.name
						// this.user.age	= user.age
						// this.user.sex =user.sex
						
					},
					// 向后端提交数据
					updateUser(){
						axios.put("/updateUser",this.user).then(result=> {
							alert(result.data)
							this.getUserList()
						})
					}
					
				},
				// created(){	
				// },
				mounted(){
					this.getUserList()//页面加载过后获取user表的数据
				}
			})
			
		</script>
	</body>
</html>
